<template>
  <el-table :data="myData" style="width: 100%">
    <el-table-column prop="bookId" label="bookId" width="140"></el-table-column>
    <el-table-column prop="isbn" label="ISBN" width="140"></el-table-column>
    <!-- <el-table-column prop="readerId" label="reserve readerId" width="140"></el-table-column> -->
    <el-table-column prop="isCancelled" label="cancelled" width="140" :formatter="yesOrNoFormatter"></el-table-column>
    <el-table-column prop="isUsed" label="used" width="140" :formatter="yesOrNoFormatter"></el-table-column>
    <el-table-column
      prop="reserveDate"
      label="reserve Date"
      :formatter="dateFormatter"
    ></el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as bookApi from "@/api/books";

const myData = ref<any[]>([]);
const getData = () => {
  bookApi.getReservationHistoryByReaderId().then((data) => {
    myData.value = data;
    console.log('data', data);
  });
};
const dateFormatter = (row: any, col: any, value: string | number | Date) => {
  return `${new Date(value).toLocaleDateString()} ${new Date(value).toLocaleTimeString()}`;
};

const yesOrNoFormatter = (row: any, col: any, value: boolean) => {
  return value ? "yes" : "no";
};

onMounted(() => {
  getData();
});
</script>

<style scoped></style>
